<template>
  <div class="question-container">
    <el-row align="middle">
      <el-col :span="23">
        <p class="question-content">{{ question.content }}</p>
      </el-col>
      <el-col :span="1" >
        <el-tag size="large" v-if="question.score" type="success">{{ question.score }}分</el-tag>
      </el-col>
    </el-row>

    <el-radio-group
        v-model="modelValue"
        class="radio-group"
        @change="handleSelectionChange"
    >
      <el-radio
          v-for="option in question.options"
          :key="option.text"
          :value="option.text"
          :label="option.text"
          size="large"
          class="radio-option"
          style="border-bottom: #909399;width: 100%"
      >
        {{ option.text }}
      </el-radio>
    </el-radio-group>

    <!-- 示例：根据需要显示答案校验结果 -->
    <div v-if="showResult" class="validation-result" :class="{ 'is-correct': isCorrect, 'is-incorrect': !isCorrect }">
      {{ isCorrect ? '回答正确！' : '回答错误，请再试一次。' }}
    </div>
  </div>
  <br/>
</template>

<script setup>
import {computed} from 'vue';
import {defineProps, defineModel} from 'vue';

const emit = defineEmits(['on-data']);
const props = defineProps({
  question: {
    type: Object,
    required: true,
    validator: (value) => {
      // 校验数据结构是否完整
      return value.content && Array.isArray(value.options) && value.options.every(opt => 'text' in opt && 'isCorrect' in opt);
    }
  },
  // 新增一个prop，用于控制是否显示校验结果
  showResult: {
    type: Boolean,
    default: false
  }
});

// 使用 v-model 来接收和更新父组件的答案
const modelValue = defineModel();

modelValue.value = props.question.modelValue;

// 数据回调
const data = reactive({
  ...props.question,
  modelValue
});
watch(modelValue, () => {
  emit('on-data', data);
})

/**
 * 计算当前选中的答案是否正确
 * 注意：这个计算属性依赖于 modelValue 和 props.question.options
 */
const isCorrect = computed(() => {
  // 如果没有选择任何答案，则不判断对错
  if (!modelValue.value) {
    return false;
  }
  // 找到当前选中的选项对象
  const selectedOption = props.question.options.find(opt => opt.text === modelValue.value);
  // 返回该选项的 isCorrect 状态
  return selectedOption ? selectedOption.isCorrect : false;
});

// 当选择改变时触发的事件，可以在这里添加额外逻辑
function handleSelectionChange(value) {
  console.log('用户选择了:', value);
  // 例如，可以在这里触发父组件的校验方法
}
</script>

<style scoped>
.question-container {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #ebeef5;
}

.question-content {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #303133;
}

.radio-group {
  display: flex;
  align-content: flex-start;
  gap: 12px;
  flex-direction: column;
}

.radio-option {
  margin-right: 0; /* 覆盖Element Plus默认的右边距 */
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.radio-option:hover {
  background-color: #f0f0f0;
  width: 100%;
}

/* 自定义选中状态的样式 */
:deep(.el-radio__input.is-checked .el-radio__inner) {
  background-color: #409eff;
  border-color: #409eff;
}

:deep(.el-radio__input.is-checked + .el-radio__label) {
  color: #409eff;
  font-weight: 600;
}

/* 校验结果样式 */
.validation-result {
  margin-top: 15px;
  padding: 10px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
}

.validation-result.is-correct {
  background-color: #f0f9ff;
  color: #67c23a;
  border: 1px solid #e1f3d8;
}

.validation-result.is-incorrect {
  background-color: #fef0f0;
  color: #f56c6c;
  border: 1px solid #fde2e2;
}
</style>
